{% extends "index.html" %}
{% load static %}
{% load jsonify %}

{% block page_content %}

<script type="text/javascript">

    heads={{ heads | jsonify }}
    row = {{ row | jsonify }}

    if(row.text){
        page_row=JSON.parse(row.text)
    }else{
        page_row={}
    }

    errors={}

    bus=new Vue()
    $(function () {
        new Vue({
            el:'#there',
            data:{
                kw:{
                    heads:heads,
                    row:row,
                    errors:errors,
                },
                menu:menu,
                can_save:false,
                can_delete:false,
                can_log:false,

                page_kw:{
                    heads:[],
                    row:page_row,
                    errors:{},
                }
            },
            mounted:function () {
                var self=this
                var ls = row._class.split('.')
                var app_label=ls[0]
                var model_name=ls[1]
                var post_data=[{fun:'model_perm',perm:'can_add',model:row._class,_rt_key:'can_save'},
                    {fun:'model_perm',perm:'can_del',model:row._class,_rt_key:'can_delete'},
                    {fun:'model_perm',perm:'can_log',model:row._class,_rt_key:'can_log'}]
                $.post('',JSON.stringify(post_data),function (data) {
                    self.can_save=data.can_save
                    self.can_delete=data.can_delete
                    self.can_log=data.can_log
                })
                if(this.kw.row.page_cls){
                    this.init_page_head(this.kw.row.page_cls)
                }
            },
            watch:{
                'kw.row.page_cls':function(v){
//                    alert(v)
                    this.init_page_head(v)
                }
            },
            methods:{
                init_page_head:function(cls_name){
                    var self=this
                    var post_data=[{fun:'page_heads',cls_name:cls_name}]
                    ex.post('/hello_ajax',JSON.stringify(post_data),function(resp){
                        if(resp.page_heads){
                            self.page_kw.heads=resp.page_heads
                        }
                    })
                },
                submit:function () {
                    bus.$emit('sync_data')
                    var self =this;
                    show_upload()
                    var search =ex.parseSearch() //parseSearch(location.search)
                    this.kw.row.text=JSON.stringify(this.page_kw.row)
                    var post_data=[{fun:'save',row:this.kw.row}]
                    $.post('',JSON.stringify(post_data),function (data) {
                        if(data.msg){
                            hide_upload()
                            return
                        }
                        if(data.save && data.save.errors){
                            self.kw.errors = data.save.errors
                            hide_upload()
                        }else if(search._pop==1){
                            if(window.opener.on_subwin_close){
                                window.opener.on_subwin_close({pk:data.save.pk,_class:data.save._class})
                            }
                            window.close()
                        }else if(search.next){
                            location=atob(search.next)
                        }else{
                            hide_upload(1000)

                        }
                    })
                },
                cancel:function () {
                    var search =ex.parseSearch() //parseSearch(location.search)
                    if(search.next){
                        location=atob(search.next)
                    }
                },
                del_row:function () {
                    if(!confirm('真的删除吗?'))
                        return
                    var obj={
                        pk:this.kw.row.pk,
                        _class:this.kw.row._class
                    }
                    var obj_str=JSON.stringify([obj])
                    var path = '{% url "del_rows" %}'
                    location=ex.template('{path}?rows={rows}&next={next}',{path:path,
                        rows:btoa(obj_str),
                        next:btoa(location.pathname)})
                }
            },

        })
    })
</script>

<div id='there'>

    <div style='float: right;padding: 5px 20px;'>
        <a href="ss">History</a>
    </div>
    <path-nav :menu='menu'>
        <li><span>编辑</span></li>
    </path-nav>

    <div style='overflow: hidden;'>
        <div class="btn-group" style='float: right;'>
            <button type="button" class="btn btn-default" @click='submit()' v-if='can_save'>Save</button>
            <button type="button" class="btn btn-default" v-if='can_delete' @click='del_row()'>删除</button>
            <button type="button" class="btn btn-default" @click='cancel()' >Cancel</button>
        </div>
    </div>


    <div class='field-panel'>
        <field  v-for='head in kw.heads' :name='head.name' :kw='kw'></field>
        <div class='field-inn'></div>
    </div>

    <div class='field-panel'>
        <field  v-for='head in page_kw.heads' :name='head.name' :kw='page_kw'></field>
        <div class='field-inn'></div>
    </div>

</div>
<style type="text/css" media="screen" id="test">

    .field-panel{
        background-color: #F5F5F5;
        max-width:80%;
        margin: 20px;
        padding: 20px 30px;
        border-radius:6px;
        position: relative;
        border: 1px solid #D9D9D9;
    }
    .field-inn{
        position: absolute;
        top:0px;
        left:0px;
        bottom:0px;
        width:180px;
        border-radius:6px;
        background-color: #fff;
        z-index:0;
    }
    .error{
        color: red;
    }

    .form-group.field{
        display: flex;
    }

    .form-group.field .control-label{
        vertical-align: top;
        position: relative;
        width:150px;
        text-align: right;
        padding:5px 30px;
        /*background-color: #fff;*/
        z-index:100;

        border-top: 1px solid #EEE;
    }

    .field-panel .field:first-child .control-label{
        border-top: 5px solid #FFF;
    }
    .form-group.field .field_input{
        flex-grow:1;
        /*display: inline-block;*/
        /*width:350px;*/
        padding:5px 20px;
    }

    .form-group.field .field_input ._tow-col-sel{
        /*width:750px;*/
    }
    ._tow-col-sel .sel {
        width: 350px;
    }
    .field.error .error{
        display: inline-block;
    }
    .form-group .field_input .ckeditor{
        padding: 20px;
    }

</style>
{% endblock %}